<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<h4 class="page-title">FORM EXAMPLES</h4>
              <!-- Basic -->
<div class="block-area" id="basic">
    <h3 class="block-title">Basic Example</h3>
    <form role="form">
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control input-sm" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        
        <div class="form-group">
             <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control input-sm" id="exampleInputPassword1" placeholder="Password">
        </div>
        
        <p>Some Help level texts here...</p>
        <div class="fileupload fileupload-new" data-provides="fileupload">
            <span class="btn btn-file btn-sm btn-alt">
                <span class="fileupload-new">Select file</span>
                <span class="fileupload-exists">Change</span>
                <input type="file" />
            </span>
            <span class="fileupload-preview"></span>
            <a href="#" class="close close-pic fileupload-exists" data-dismiss="fileupload">
                <i class="fa fa-times"></i>
            </a>
        </div>
        
        <button type="submit" class="btn btn-sm m-t-10">Login</button>
        <button type="submit" class="btn btn-sm m-t-10">Cancel</button>
    </form>
</div>

<hr class="whiter m-t-20" />

<!-- Basic with panel-->
<div class="block-area" id="basic">
    <h3 class="block-title">Basic Example with Panel</h3>
    <div class="tile p-15">
        <form role="form">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control input-sm" id="exampleInputEmail1" placeholder="Enter email">
            </div>
            
            <div class="form-group">
                 <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control input-sm" id="exampleInputPassword1" placeholder="Password">
            </div>
            
            <p>Some Help level texts here...</p>
            <div class="fileupload fileupload-new" data-provides="fileupload">
                <span class="btn btn-file btn-sm btn-alt">
                    <span class="fileupload-new">Select file</span>
                    <span class="fileupload-exists">Change</span>
                    <input type="file" />
                </span>
                <span class="fileupload-preview"></span>
                <a href="#" class="close close-pic fileupload-exists" data-dismiss="fileupload">
                    <i class="fa fa-times"></i>
                </a>
            </div>
            
            <button type="submit" class="btn btn-sm m-t-10">Login</button>
            <button type="submit" class="btn btn-sm m-t-10">Cancel</button>
        </form>
    </div>
</div>

<hr class="whiter m-t-20" />

<!-- Inline -->
<div class="block-area" id="inline">
    <h3 class="block-title">Inline Form</h3>
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" class="form-control input-sm" id="exampleInputEmail2" placeholder="Enter email">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword2">Password</label>
            <input type="password" class="form-control input-sm" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="checkbox m-l-5 m-r-10">
            <label>
                <span class="checkableBox"><input type="checkbox"></span>
                <span>Remember me</span>
            </label>
        </div>
        <button type="submit" class="btn btn-sm">Sign in</button>
    </form>
</div>

<hr class="whiter m-t-20" />

<!-- Horizontal -->
<div class="block-area" id="horizontal">
    <h3 class="block-title">Horizontal Form</h3>
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="inputName1" class="col-md-2 control-label">Name</label>
            <div class="col-md-10">
                <input type="text" class="form-control input-sm" id="inputName1" placeholder="...">
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail1" class="col-md-2 control-label">Email Address</label>
            <div class="col-md-10">
                <input type="email" class="form-control input-sm" id="inputEmail1" placeholder="...">
            </div>
        </div>
        <div class="form-group">
            <label for="inputMessage" class="col-md-2 control-label">Message</label>
            <div class="col-md-10">
                <textarea class="form-control auto-size input-sm" id="inputMessage" placeholder="..."></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-info btn-sm m-t-10">SUBMIT FORM</button>
            </div>
        </div>
    </form>
</div>

<hr class="whiter m-t-20" />

<!-- Static Control -->
<div class="block-area" id="static-control">
    <h3 class="block-title">Static Control</h3>
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label class="col-md-2 control-label">Name</label>
            <div class="col-md-10">
                <p class="form-control-static">David Aleam</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">Email</label>
            <div class="col-md-10">
                <p class="form-control-static">email@example.com</p>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="col-md-2 control-label">Password</label>
            <div class="col-md-10">
                <input type="password" class="form-control input-sm" id="inputPassword" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-warning btn-sm m-t-10">UPDATE</button>
            </div>
        </div>
    </form>
</div>

<hr class="whiter m-t-20" />

<!-- Multi Column -->
<div class="block-area" id="multi-column">
    <h3 class="block-title">Multi Column</h3>
    <form class="row form-columned" role="form">
        <div class="col-md-4">
            <input type="text" class="form-control input-sm m-b-10" placeholder="Name">
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control input-sm m-b-10" placeholder="Username">
        </div>
        <div class="col-md-4 m-b-10">
            <select class="select">
                <option>Country</option>
                <option>Japan</option>
                <option>Korea</option>
                <option>China</option>
            </select>
        </div>
        <div class="clearfix"></div>
        <div class="col-md-4">
            <input type="tel" class="form-control input-sm m-b-10" placeholder="Contact Number">
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control input-sm m-b-10" placeholder="City">
        </div>
        <div class="col-md-4">
            <input type="password" class="form-control input-sm m-b-10" placeholder="Password">
        </div>
        <div class="col-md-12">
            <textarea class="form-control m-b-10" placeholder="Description"></textarea>
        </div>
        <div class="col-md-10">
            <button type="submit" class="btn btn-sm">Save Profile</button>
        </div>
    </form>
</div>

<hr class="whiter m-t-20" />

<!-- Custom -->
<div class="block-area" id="custom">
    <h3 class="block-title">Custom Forms</h3>
    <div class="dropdown">
        <a data-toggle="dropdown" href="#">Dropdown - Login</a>
        <div class="dropdown-menu dark col-md-3 animated flipInY dropdown-form" role="menu">
            <header class="dark-header">
                <h4 class="dark-title m-0">Form Header</h4>
            </header>
            <div class="dark-body">
                <form role="form">
                    <div class="form-group">
                        <label>Email address</label>
                        <input type="email" class="form-control input-sm" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                         <label>Password</label>
                        <input type="password" class="form-control input-sm" placeholder="Password">
                    </div>
                </form>
            </div>
            <div class="dark-footer">
                <button type="submit" class="btn btn-sm btn-alt">Login to Backend</button>
            </div>
        </div>
    </div>
    <br/>
    <p><a data-toggle="modal" href="#form-modal">Open Modal</a></p>

    <!-- Modal -->
    <div class="modal fade" id="form-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputName4" class="col-md-2 control-label">Name</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control input-sm" id="inputName4" placeholder="...">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail4" class="col-md-2 control-label">Email</label>
                            <div class="col-md-9">
                                <input type="email" class="form-control input-sm" id="inputEmail4" placeholder="...">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputMessage3" class="col-md-2 control-label">Message</label>
                            <div class="col-md-9">
                                <textarea class="form-control auto-size input-sm" id="inputMessage3" placeholder="..."></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-alt">Save changes</button>
                    <button type="button" class="btn btn-sm btn-alt" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>